const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = {
    entry: ['./src/index.js', './src/index.ts'],
    output: {
        publicPath: '/dist', //将打包的文件缓存到内存监听
        filename: 'bunrl.js' //打包名字
    },
    devServer: {
        open: true,
        // openPage: './main.html',//设置页面的初始打开
    },
    module: {
        rules: [{
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                    loader: 'file-loader'
                }]
            },
            {
                test: /\.s[ac]ss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'] //
            },
            {
                test: /\.css|scss|sass$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'] //配置打包的css的loader
            },
            {
                test: /\.(svg|eot|ttf|woff|woff2)/,
                use: ['url-loader']
            }
        ]
    },
    resolve: {
        alias: {
            "@css": path.join(__dirname, "src/asster/css"), //配置路径,必须是绝对路径
            "@img": path.join(__dirname, "src/asster/img"),
            "@ts": path.join(__dirname, "src/asster/ts"),
            "@js": path.join(__dirname, "src/asster/js"),
        },
        extensions: ['.js', '.ts', '.css', '.scss']
    },
    devServer: {
        open: true,
        proxy: {
            '/zhihu': {
                target: 'https://www.zhihu.com/',
                changeOrigin: true,
                pathRewrite: {
                    '/zhihu': ''
                }
            }
        }
    },
    plugins: [
        new htmlwebpackplugin({
            template: 'index.html' //打包的HTML文件
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css' //输出文件的名字
        })
    ]
}